<template>
    <v-layout type="main">
        <p class="page-title">模型管理</p>
        <el-steps :active="active" v-if="operator == 1 || operator == 2" simple class="my-steps">
            <el-step title="基本信息" icon="el-icon-edit"></el-step>
            <el-step title="上传文件" icon="el-icon-upload"></el-step>
            <el-step title="完成" icon="el-icon-picture"></el-step>
        </el-steps>
        <div class="detail-layout">
            <el-form ref="form" :model="addForm" :rules="submitRules" label-width="120px" class="alick-add-form">

                <br />
                <div v-if="active == 1">
                    <h3 class="add-alike-title">基本信息</h3>

                    <div v-if="operator == 1">
                        <div v-if="model_id == null">
                            <el-form-item label="范围" prop="visibility">
                                <el-radio-group v-model="addForm.visibility">
                                    <el-radio :label="0">私有的</el-radio>
                                    <el-radio :label="1">共享的</el-radio>
                                </el-radio-group>
                            </el-form-item>
                            <el-form-item label="名称" prop="name">
                                <el-input type="text" v-model="addForm.name" />
                            </el-form-item>
                            <el-form-item label="别名" prop="alias">
                                <el-input type="text" v-model="addForm.alias" />
                            </el-form-item>
                            <el-form-item label="描述" prop="desc">
                                <el-input type="textarea" :rows="3" v-model="addForm.desc" />
                            </el-form-item>
                            <el-form-item label="配图">
                                <media-uploader accept=".jpg,.jpeg,.png,.JPG,.JPEG" :src="addForm.avatar"
                                    @avatarPath="avatarPath" />
                            </el-form-item>
                        </div>
                    </div>
                    <div v-if="operator == 2">
                        <el-form-item label="名称" prop="model_name">
                            {{ addForm.name }}
                        </el-form-item>
                    </div>
                    <div v-if="operator == 3">
                        <el-form-item label="名称" prop="model_name">
                            {{ addForm.name }}
                            <el-button class="none-type" type="primary" @click="preAddModel">新增模型</el-button>
                        </el-form-item>
                    </div>
                    <h3 class="add-alike-title">版本信息</h3>
                    <el-form-item label="版本" prop="version">
                        <el-input type="text" v-model="addForm.version" readonly />
                    </el-form-item>
                    <el-form-item label="提交信息" prop="commit_msg">
                        <el-input type="textarea" :rows="3" v-model="addForm.commit_msg" />
                    </el-form-item>
                </div>
                <div v-if="active == 2">
                    <el-form-item label="数据来源" prop="file_source">
                        <el-radio-group v-model="version.file_source">
                            <el-radio :label="1">本地上传</el-radio>
                            <el-radio :label="2">S3接入</el-radio>
                        </el-radio-group>
                        <wrapUploader @succeedOver="succeedOver" type="model" :biz_id="version.id"
                            v-if="version.file_source == 1" />
                        <div v-if="version.file_source == 2">
                            <el-form-item label="bucket名称" prop="file_source">
                                <el-select v-model="version.s3_access_id">
                                    <el-option v-for="item in s3Options" :value="item.id" :label="item.name" :key="item.id">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item label="S3路径" prop="file_source">
                                <el-input v-model="version.s3_path" class="entrance" />
                            </el-form-item>
                        </div>
                    </el-form-item>
                </div>
                <div v-show="active == 3">
                    <h1 class="succeed-hint">创建成功</h1>
                    <div class="succeed-btn">
                        <a href="javascript:;" class="start" @click="toDetail">立即前往</a>
                    </div>
                </div>
                <el-form-item label=" ">
                    <el-button class="none-type" type="primary" @click="nextSubmit"
                        v-if="operator == 1 && active == 1">下一步</el-button>
                    <el-button class="none-type" type="primary" @click="submit"
                        v-if="operator == 2 && active == 1">下一步</el-button>
                    <el-button class="none-type" type="primary" @click="fileSubmit"
                        v-if="(operator == 1 || operator == 2) && active == 2">确定</el-button>
                    <el-button class="none-type" type="primary" @click="submit"
                        v-if="operator == 3 && active == 1">确定</el-button>
                </el-form-item>

            </el-form>
        </div>
    </v-layout>
</template>
  
<script>
import { labelDicts, } from '@/utils/maps'
import { getAllAssetS3 } from '@/api/inout'
import { getGameExperimentDetail } from '@/api/gameExperiment'
import { getGameTaskDetail } from '@/api/gameTask'
import { addModel, getModelDetail } from '@/api/model'
import { addModelVersion, getAllModelVersions } from '@/api/modelversion'
export default {
    data() {
        return {
            operator: 1,
            addForm: {
                visibility: 0,
                type: '2',
                name: '',
                desc: '',
                alias: '',
                labels: '',
                version: 'v1'
            },
            model: {},
            version: {},
            submitRules: {
                name: [
                    { required: true, message: "该项为必填项" },
                    { required: true, min: 1, max: 40, message: "长度在1到40个字符" },
                ],
                alias: [
                    { required: true, message: "该项为必填项" },
                    { required: true, min: 5, max: 40, message: "长度在1到40个字符" },
                ],
                desc: [
                    { required: true, message: "该项为必填项" },
                    { required: true, min: 1, max: 200, message: "长度在1到200个字符" },
                ],
                commit_msg: [
                    { required: true, message: "该项为必填项" },
                    { required: true, min: 1, max: 500, message: "长度在1到200个字符" },
                ],
            },
            labelDicts,
            showSelectDialog: false,
            active: 1,
            task_id: this.$route.query.task_id,
            experiment_id: this.$route.query.experiment_id,
            model_id: this.$route.query.model_id,
            showFile: false,
            defaultProps: {
                label: "name",
                children: [],
                isLeaf: "dir",
            },
            node: {},
            resolve: [],
            defaultCheckNode: [], //默认选中model文件夹和main.py 主文件
        };
    },
    async created() {
        this.getData()
        this.getS3()
    },
    methods: {
        async getData() {
            if (this.experiment_id || this.task_id) {
                this.operator = 3
                if (this.model_id != null) {  //第二次导出
                    let res = await getModelDetail({ id: this.model_id })
                    let data = res.data
                    this.addForm.name = data.name
                    this.addForm.desc = data.desc
                    this.addForm.alias = data.alias
                    this.addForm.visibility = 0
                    this.addForm.labels = data.labels
                    this.addForm.version = 'v' + (data.version_index + 1)
                } else {
                    //第一次导出
                    if (this.experiment_id) {
                        let res = await getGameExperimentDetail({ id: this.experiment_id })
                        let data = res.data
                        this.addForm.name = data.name
                        this.addForm.desc = data.desc
                        this.addForm.alias = data.alias
                        this.addForm.visibility = 0
                        this.addForm.version = 'v1'
                    }
                    if (this.task_id) {
                        let res = await getGameTaskDetail({ id: this.task_id })
                        let data = res.data
                        this.addForm.name = data.name
                        this.addForm.desc = data.desc
                        this.addForm.alias = data.alias
                        this.addForm.visibility = 0
                        this.addForm.version = 'v1'
                    }
                }
            }
            else {
                if (this.model_id) {
                    let res = await getModelDetail({ id: this.model_id })
                    let data = res.data
                    this.addForm.name = data.name
                    this.addForm.desc = data.desc
                    this.addForm.alias = data.alias
                    this.addForm.visibility = 0
                    this.addForm.labels = data.labels
                    this.addForm.version = 'v' + (data.version_index + 1)
                    this.operator = 2 //新增版本
                    console.log("addForm2", this.addForm)
                }
                else {
                    this.operator = 1
                }

            }
            console.log("operator", this.operator)
            this.$forceUpdate()
        },
        avatarPath(data) {
            this.addForm.avatar = data;
        },
        toDetail() {
            let query = {
                id: this.model_id,
                version_id: this.version.id
            }
            this.$router.push({
                path: '/modelGameModel/code',
                query
            })
        },
        nextSubmit() {
            this.$refs.form.validate(async (valid) => {
                if (valid) {
                    console.log("addForm", this.addForm)
                    let ret = await addModel({ ...this.addForm });
                    this.addForm = ret.data
                    this.model_id = this.addForm.id
                    let version_ret = await getAllModelVersions({ model_id: this.addForm.id })
                    this.versionOptions = version_ret.data
                    if (this.versionOptions.length > 0) {
                        this.version = this.versionOptions[0]
                    }
                    this.active = 2
                }
            })
        },
        submit() {
            this.$refs.form.validate(async (valid) => {
                if (valid) {
                    console.log("model_id", this.model_id)
                    let modelVersion = {}
                    modelVersion.model_id = this.model_id
                    modelVersion.version = this.addForm.version
                    if (this.task_id) {
                        modelVersion.business_id = this.task_id
                        modelVersion.business_type = 2
                    }
                    else {
                        modelVersion.business_id = this.experiment_id
                        modelVersion.business_type = 1
                    }
                    modelVersion.commit_msg = this.addForm.commit_msg
                    console.log("modelversion", modelVersion)
                    let ret = await addModelVersion(modelVersion)
                    console.log("version", this.version)
                    this.version = ret.data
                    if (this.operator == 2) {
                        this.active = 2
                    }
                    if (this.operator == 3) {
                        this.active = 3
                    }
                }
            })
        },
        fileSubmit() {
            this.active = 3
        },
        async getS3() {
            let res = await getAllAssetS3()
            this.s3Options = res.data


        },
        succeedOver(data) {
            console.log(data)
        },
    }
}
</script>
<style lang="less" scoped>
@import "~@/assets/css/detail-add.less";

.detail-layout {
    background: #FFF;
    padding-right: 20px;
}

.name-icon {
    padding-left: 28px;
    cursor: pointer;
    background: url(~@/assets/img/file-icon/text.png) no-repeat;
    background-size: 22px 22px;
    width: 100%;
    height: 22px;
    display: block;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.dir {
    background: url(~@/assets/img/file-icon/dir.png) no-repeat;
    background-size: 22px 22px;
}

.zip {
    background: url(~@/assets/img/file-icon/zip.png) no-repeat;
    background-size: 22px 22px;
}

.pic {
    background: url(~@/assets/img/file-icon/pic.png) no-repeat;
    background-size: 22px 22px;
}

.video {
    background: url(~@/assets/img/file-icon/video.png) no-repeat;
    background-size: 22px 22px;
}

.voice {
    background: url(~@/assets/img/file-icon/voice.png) no-repeat;
    background-size: 22px 22px;
}
</style>
